<template>
    <div style="display: none">
        <slot v-if="ready" />
    </div>
</template>
<script>
import { propsBinder, findRealParent } from '../../utils'
import { echartsLayer } from './EChartsLayer'
import { DomEvent } from 'leaflet'
import Layer from '../../mixins/Layer'

export default {
    name: 'LEChart',
    mixins: [Layer],
    props: {
        option: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            ready: false,
        }
    },
    mounted() {
        this.mapObject = echartsLayer()
        propsBinder(this, this.mapObject, this.$options.props)
        DomEvent.on(this.mapObject, this.$listeners)
        this.ready = true
        this.parentContainer = findRealParent(this.$parent, true)
        if (this.visible) {
            this.parentContainer.addLayer(this)
        }

        this.setOption()
        this.$nextTick(() => {
            /**
             * Triggers when the component is ready
             * @type {object}
             * @property {object} mapObject - reference to leaflet map object
             */
            this.$emit('ready', this.mapObject)
        })
    },
    beforeDestroy() {
        this.mapObject.remove()
    },
    methods: {
        setOption() {
            this.option && this.mapObject.setOption(this.option, false, true)
        },
    },
    watch: {
        option(n, o) {
            if (n) {
                this.setOption()
            }
        },
    },
}
</script>
